<template>
  <div>
    <div class="colorBox" :style="{'background':changeColor}"></div>
    <div>
      R:<input type="range"  max="250" v-model="r"/> {{r}}
      G:<input type="range"  max="250" v-model="g"/> {{g}}
      B:<input type="range"  max="250" v-model="b"/> {{b}}
    </div>
  </div>
</template>
<script>
export default {
 data () {
  return {
   r : 0,
   g : 0,
   b : 0
  }
 },
 computed: {
  changeColor() {
  return  `rgb(${this.r},${this.g},${this.b})`
  }
 }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
